<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-rate :size="20"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义选中星星数量</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-rate :size="20" v-model="value" @change="change"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义星星大小</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__tag-item">
               <uv-rate :size="30" :count="4"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否禁用评分</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" disabled></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否只读评分</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" readonly></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义选中星星颜色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" v-model="activeColorValue" activeColor="#2979ff"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义未选中星星颜色</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" v-model="value1" inactiveColor="#2979ff"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁止触摸选择</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" :touchable="false"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">允许触摸选择</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate :size="20" :touchable="true"></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否允许半星</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate
                  :size="20"
                  v-model="HalfValue"
                  :touchable="true"
                  :allowHalf="true"
                  @change="change"
               ></uv-rate>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义选中的图标</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__rate-item">
               <uv-rate
                  :size="20"
                  v-model="activeIconValue"
                  inactiveIcon="heart"
                  activeIcon="heart-fill"
               ></uv-rate>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(3);
const value1 = ref(2);
const activeColorValue = ref(3);
const HalfValue = ref(3.5);
const activeIconValue = ref(3);

const change = (e: any) => {
   console.log(e);
};
</script>

<style lang="scss" scoped></style>
